<template>
  <div>
    <a-button-group>
      <a-button
        type="primary"
        @click="openUploadModal"
        preIcon="carbon:cloud-upload"
      >
        <!-- 上传 -->
        {{ t('component.upload.upload') }}
      </a-button>
      <Tooltip
        placement="bottom"
        v-if="showPreview"
      >
        <template #title>
          {{ t('component.upload.uploaded') }}
          <template v-if="fileListRef.length">{{ fileListRef.length }}</template>
        </template>
        <a-button @click="openPreviewModal">
          <Icon icon="bi:eye" />
          <template v-if="fileListRef.length && showPreviewNumber">
            {{ fileListRef.length }}
          </template>
        </a-button>
      </Tooltip>
    </a-button-group>
    <!-- 上传弹窗 -->
    <UploadModal
      v-bind="bindValue"
      @register="registerUploadModal"
      @change="handleChange"
    />
    <!-- 预览弹窗 -->
    <UploadPreviewModal
      :value="fileListRef"
      @register="registerPreviewModal"
      @list-change="handlePreviewChange"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, unref, computed } from 'vue';

import UploadModal from './UploadModal.vue';
import UploadPreviewModal from './UploadPreviewModal.vue';
import Icon from '/@/components/Icon';
import { Tooltip } from 'ant-design-vue';

import { useModal } from '/@/components/Modal';

import { uploadContainerProps } from './props';
import { omit } from 'lodash-es';
import { useI18n } from '/@/hooks/web/useI18n';

export default defineComponent({
  name: 'BasicUpload',
  components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
  props: uploadContainerProps,
  setup(props, { emit, attrs }) {
    const { t } = useI18n();
    // 上传modal
    const [registerUploadModal, { openModal: openUploadModal }] = useModal();

    //   预览modal
    const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();

    const fileListRef = ref<string[]>([]);

    const showPreview = computed(() => {
      const { emptyHidePreview } = props;
      if (!emptyHidePreview) return true;
      return emptyHidePreview ? fileListRef.value.length > 0 : true;
    });

    const bindValue = computed(() => {
      const value = { ...attrs, ...props };
      return omit(value, 'onChange');
    });

    watch(
      () => props.value,
      (value = []) => {
        fileListRef.value = value;
      },
      { immediate: true }
    );

    // 上传modal保存操作
    function handleChange(urls: string[]) {
      if (props.api) {
        fileListRef.value = [...unref(fileListRef), ...(urls || [])];
        emit('change', fileListRef.value);
      } else {
        emit('change', [...urls]);
      }
    }

    // 预览modal保存操作
    function handlePreviewChange(urls: string[]) {
      fileListRef.value = [...(urls || [])];
      emit('change', fileListRef.value);
    }

    return {
      registerUploadModal,
      openUploadModal,
      handleChange,
      handlePreviewChange,
      registerPreviewModal,
      openPreviewModal,
      fileListRef,
      showPreview,
      bindValue,
      t,
    };
  },
});
</script>
